<template>
  <form class="addAddress">
    <div class="add-heading">
      添加收货地址
    </div>
    <div class="add-context">
      <div class="add-change">
        <div class="add-group el-row">
          <label class="el-col-xs-6 el-col-sm-4 add-label"><span style="color: red;font-size: 14px;">*</span>&nbsp;收货人:</label>
          <div class="el-col-xs-18 el-col-sm-8">
            <input class="add-text" name="name" type="text" maxlength="20" v-model="newaddress.consignee"/>
          </div>
        </div><br>
        <div class="add-group el-row">
          <label class="el-col-xs-6 el-col-sm-4 add-label"><span style="color: red;font-size: 14px;">*</span>&nbsp;地区:</label>
          <div class="el-col-xs-18 el-col-sm-8">
            <div class="add-region" style="margin-left: 20px;width: 100%;">
              <el-cascader
                  class="add-text add-classification"
                  style="width: 100%;"
                  name="areaName"
                  v-model="region"
                  :options="options"
                  @change="handleChange"
              ></el-cascader>
            </div>
          </div>
        </div><br>
        <div class="add-group el-row">
          <label class="el-col-xs-6 el-col-sm-4 add-label"><span style="color: red;font-size: 14px;">*</span>&nbsp;地址:</label>
          <div class="el-col-xs-18 el-col-sm-8">
            <input class="add-text" name="address" type="text" maxlength="20" v-model="newaddress.address"/>
          </div>
        </div><br>
        <div class="add-group el-row">
          <label class="el-col-xs-6 el-col-sm-4 add-label"><span style="color: red;font-size: 14px;">*</span>&nbsp;邮编:</label>
          <div class="el-col-xs-18 el-col-sm-8">
            <input class="add-text" name="zipCode" type="text" maxlength="20" v-model="newaddress.zipCode"/>
          </div>
        </div><br>
        <div class="add-group el-row">
          <label class="el-col-xs-6 el-col-sm-4 add-label"><span style="color: red;font-size: 14px;">*</span>&nbsp;电话:</label>
          <div class="el-col-xs-18 el-col-sm-8">
            <input class="add-text" name="phone" type="text" maxlength="20" v-model="newaddress.phone" />
          </div>
        </div><br>
        <div class="add-group el-row">
          <!-- <label class="el-col-xs-6 el-col-sm-4 add-label">设置:</label>
          <div class="el-col-xs-18 el-col-sm-8 add-c-text">
            <input style="vertical-align: middle;" name="isDefault" type="checkbox" v-model="newaddress.isDefault" >
            是否默认
          </div> -->
        </div><br>
      </div>
    </div>
    <div class="add-footer">
      <div class="el-row footer-body">
        <div class="el-col-xs-18 el-col-sm-20 el-col-xs-offset-6 el-col-sm-offset-4">
          <button class="footer-button" @click="toaddaddress(newaddress,$event)">完成</button>
          <button class="goback-button" @click="goBack">返回</button>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import router from '@/router'
import {reactive,ref} from "vue";
import {addaddress} from "@/api/address";
import { ElMessage } from 'element-plus';

  export default {
    name: "addAddress",
    setup(){
      let options = reactive([
        {
          value:'浙江省',
          label:'浙江省',
          children:[
            {
              value:'杭州市',
              label:'杭州市',
              children:[
                {
                  value:'上城区',
                  label:'上城区',
                },
                {
                  value:'下城区',
                  label:'下城区',
                },
                {
                  value:'江干区',
                  label:'江干区',
                },
                {
                  value:'西湖区',
                  label:'西湖区',
                },
                {
                  value:'拱墅区',
                  label:'拱墅区',
                }
              ]
            },
            {
              value:'宁波市',
              label:'宁波市',
              children:[
                {
                  value:'海曙区',
                  label:'海曙区',
                },
                {
                  value:'江北区',
                  label:'江北区',
                },
                {
                  value:'镇海区',
                  label:'镇海区',
                },
                {
                  value:'奉化区',
                  label:'奉化区',
                },
                {
                  value:'鄞州区',
                  label:'鄞州区',
                }
              ]
            },
            {
              value:'绍兴市',
              label:'绍兴市',
              children:[
                {
                  value:'柯桥区',
                  label:'柯桥区',
                },
                {
                  value:'越城区',
                  label:'越城区',
                },
                {
                  value:'上虞区',
                  label:'上虞区',
                }
              ]
            },
          ]
        },
        {
          value: '上海市',
          label: '上海市',
          children: [
            {
              value: '上海市',
              label: '上海市',
              children: [
                {
                  value:'黄埔区',
                  label:'黄埔区',
                },
                {
                  value:'徐汇区',
                  label:'徐汇区',
                },
                {
                  value:'长宁区',
                  label:'长宁区',
                },
                {
                  value:'虹口区',
                  label:'虹口区',
                },
                {
                  value:'浦东新区',
                  label:'浦东新区',
                },
              ]
            }
          ]
        }
      ])
      let region = ref([])
      let regionValue = reactive("")
      let newaddress = reactive({
        address: "",
        areaName: "",
        consignee: "",
        isDefault: "0",
        phone: "",
        zipCode: "",
        areaId: ""
      })
      function toaddaddress(formName, e) {
        regionValue = JSON.parse(JSON.stringify(region))
        addaddress(newaddress)
            .then((res) => {
              console.log(res);
              if (res.data.code === 401) {
                let target = e.target;
                if (target.nodeName === "SPAN") {
                  target = e.target.parentNode;
                }
                target.blur();
                return;
              }
              ElMessage.success('添加成功')
            })
            .catch((err) => {
              console.log(err);
              this.$message.error("添加失败");
            });
        router.replace('/member/address')
      }
      function handleChange(){
        let reg = new RegExp('"','g')
        regionValue=JSON.stringify(region.value).replace('[','').replace(',',' ').replace(',',' ').replace(']','').replace(reg,'')
        console.log(regionValue)
        console.log(newaddress)
        newaddress.areaName = regionValue
      }

      function goBack(){
        router.replace({path:'/member/address'})
      }

      return {
        newaddress,
        region,
        options,
        goBack,
        toaddaddress,
        handleChange,
      }
    },
  }
</script>

<style scoped>
  *{
    font-size: 13px;
    color: #333;
  }
  a{
    text-decoration: none;
    color: #666666;
  }
  ul{
    list-style: none;
    padding-left: 0;
  }
  .addAddress{
    background-color: white;
  }
  .add-heading{
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  .add-context{
    padding: 15px 15px 0 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  .add-group{
    width: 100%;
    margin-bottom: 5px;
    margin-left: -10px;
    margin-right: -10px;
  }
  .add-label{
    text-align: right;
    margin-bottom: 0;
    padding-top: 7px;
    color: #666666;
  }
  .add-region div div input{
    line-height: 31px !important;
    height: 31px !important;
  }
  .add-text{
    width: 100%;
    height: 40px;
    font-size: 14px;
    padding: 0 15px;
    margin-left: 20px;
    background-color: white;
    /*font-size: 12px;*/
    border: 1px #ccc solid;
    border-radius: 4px;
  }
  .add-text:hover{
    box-shadow: 0 2px 10px 5px rgba(64,158,255,0.2) !important;
    border-color: #409EFF !important;
  }
  .add-classification:focus{
    box-shadow: 0 2px 10px 5px rgba(64,158,255,0.2) !important;
    border-color: #409EFF !important;
  }
  .add-c-text{
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-left: 20px;
    background-color: white;
  }
  .add-c-text input:hover{
    box-shadow: 0 2px 10px 5px rgba(64,158,255,0.2);
    border-color: #409EFF;
    cursor: pointer;
  }
  select{
    width:80px;
    margin:5px;
  }

  .add-footer{
    padding: 10px 15px;
  }
  .footer-body{
    padding-left: 10px;
    padding-right: 10px;
  }
  .footer-button{
    opacity: 0.8;
    margin-right: 10px;
    line-height: 35px;
    padding: 0 20px;
    color: white;
    border: none;
    background: -webkit-linear-gradient(left, #409EFF, plum);
    border-radius: 4px;
  }
  .footer-button:hover{
    cursor: pointer;
  }
  .goback-button{
    line-height: 35px;
    padding: 0 20px;
    background-color: white;
    border-radius: 4px;
    border: 1px #d8d8d8 solid;
  }
  .goback-button:hover{
    cursor: pointer;
  }
</style>